<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角</title>
			<style>
					.box{
						width: 41px;
						height: 69px;
						background: url(img/);
						background-position: -83px;
					}
					.box:hover{
						background-position: 0;
					}
					.intext{
						width: 200px;
						height: 50px;
						border: 1px solid #c0c0c0;
					}
					/* 选择器的权重：id 100   class 10   标签 1 */
					.intext .lebox{
						width: 78%;
						height: 100%;
						border: 1px solid #c0c0c0;
					}
					.lebox .rbox{
						width: 20%;
						height: 100%;
						border: 1px solid #c0c0c0;
					}
					.intext .lebox.in{
						width: 90%;
						height: 100%;
					}
					/* #re{   100 
						border: 1px solid red;
					} */
					.bigbox{
						position: relative;
						width: 100%px;
						height: 400px;
						background-color: chocolate;
						margin: auto;
					}
					.bigbox .left{
						position: absolute;
						top: 50%;
						left: -50px;
						transform: translatey(-50%);
						width: 50px;
						height: 70px;
						background-color: blueviolet;
						transition: all .2s linear;
					}
					.bigbox:hover.lef{
						left: 0;
					}
					.yuan{
						 width: 400px;
						height: 400px;
						background-color: aqua;
						/* 圆角 */
						 border-radius: 200px; 
					}
					.sanjiaoxing{
						width: 300px;
						height: 300px;
					}
				</style>
			</head>
			<body>
				<div class="box"></div>
				<div class="intext">
					<div class="lebox" id="re">
						<input class="in" type="text" placeholder="请输入......"/>
					</div>
					<div class="rbox">
						<img src=""/>
					</div>
				</div>
				<div class="bigbox">
					<div class="left"></div>
				</div>
				<div class="yuan">
					<div class="sanjiaoxing"></div>
				</div>
	</body>
</html>